.item {
    > H4 {
        margin: 0 0 0 15px;
        padding-top: 3px;
    }

     &[data-method] > H4 {
        margin-left: 60px;
    }
}
#item-head  > .diff-header {
    padding:0 4px 0 3px;
}
.item  > .diff-header {
    padding:0 3px 0 3px;
}

.item, #item-head {
    > .diff-header {
        position: absolute;
        top: 0px;
        right: 0px;
        background-color: rgb(245, 245, 245);
        border-top: none;
        border-right: none;
        color: #000;
        border-radius: 0 4px 0 4px;
        white-space: no-wrap;

        padding:0 3px;

        > H5 {
            font-size: 13px;
            font-weight: bold;
            line-height: 16px;

            cursor: pointer;
            & {
                &.diff {
                    display:none;
                }
                &.desc {
                    display:block;
                }
            }

            > I {
                margin-right: 3px;
            }
        }

        > .versions {
            display: none;
            white-space: no-wrap;
            font-size: 10px;
            margin: 0;


            > LI {
                padding: 2px 7px;
                border-left: 1px solid #CCC;
                color: #666;
                line-height: 14px;
                position: relative;

                cursor: pointer;

                &[data-exists=no] {
                    color: #CCC;
                }

                &:first-child {
                    border-left: none;
                }

                &.diff_first {
                    font-weight: bold;
                    color: #000;
                }

                &.diff_right {
                    color: hsl(120, 100%, 20%);;
                }
                &.diff_left {
                    color: hsl(0, 100%, 20%);;
                }
                &.diff_left.diff_right {
                    color: hsl(0, 100%, 0%);;
                }

                > I {
                    display: none;
                }
            }
        }
    }

    &.diff-mode > .diff-header {
        > H5 {
            &.diff {
                display:block;
                > I.mode-side, > I.mode-inline, > I.mode-full, > I.mode-mini {
                    display:none;
                }
            }
            &.desc {
                display:none;
            }
        }
        > .versions {
            display: block;
        }
    }

    &.diff-mode-side > .diff-header > H5.diff {
        > I.mode-side {
            display:inline-block;
        }
        > I.mode-inline {
            display:none;
        }
    }

    &.diff-mode-inline > .diff-header > H5.diff {
        > I.mode-side {
            display:none;
        }
        > I.mode-inline {
            display:inline-block;
        }
    }

    &.diff-mode-full > .diff-header > H5.diff {
        > I.mode-full {
            display:inline-block;
        }
        > I.mode-mini {
            display:none;
        }
    }

    &.diff-mode-mini > .diff-header > H5.diff {
        > I.mode-full {
            display:none;
        }
        > I.mode-mini {
            display:inline-block;
        }
    }
}


#item-head {

    > .diff-header > H5.desc[data-changed]::before {
        top: -1px;
        left: -15px;
    }

    > .stack {
        padding: 5px 15px;
        > H5 {
            margin: 0;
        }
    }
}

.item[data-changed]::before {
    top: -5px;
    right: 15px;
    z-index: 1;
}

.item > .diff-header > .versions > LI:not(:first-child), #item-head > .diff-header > .versions > LI:not(:first-child) {
    &[data-changed]::before {
        bottom: -7px;
        left: -5px;
    }
}

.doc-sidenav > LI {
    &[data-changed]::before {
        right: 1px;
    }
}

.item, .item > .diff-header > .versions > LI:not(:first-child)
, #item-head > .diff-header > H5.desc, #item-head > .diff-header > .versions > LI:not(:first-child)
, .doc-sidenav > LI {
    &[data-changed]::before {
        display: block;
        position: absolute;
        padding: 0 3px;
        color: #333;
        font-weight: normal;
        font-size: 9px;
        line-height: 11px;
    }

    &[data-changed=new]::before {
        content: "new";
        background-color: hsl(103, 45%, 70%);
    }

    &[data-changed=updated]::before {
        content: "change";
        background-color: hsl(38, 80%, 70%);
    }

    &[data-changed=deleted]::before {
        content: "delete";
        background-color: hsl(0, 45%, 70%);
    }
}